<!--  -->
<template>
  <div v-if="dialogFormVisible">
    <el-dialog title="编辑站点Logo" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :modal-append-to-body="false">
      <el-form :model="logoInfo" v-loading="loading" @submit.native.prevent>
        <el-form-item label="展示方式" :label-width="formLabelWidth">
          <el-radio v-model="logoInfo.type" :label="0">不显示</el-radio>
          <el-radio v-model="logoInfo.type" :label="1">文字显示</el-radio>
          <el-radio v-model="logoInfo.type" :label="2">图片显示</el-radio>
        </el-form-item>
        <!-- 文字显示 -->
        <div v-if="logoInfo.type === 1">
          <el-form-item label="文字Logo" :label-width="formLabelWidth" class="requireStar">
            <el-input v-model="logoInfo.title" size="small" placeholder="请输入内容" maxlength="20" style="width:80%;">
            </el-input>
          </el-form-item>
          <el-form-item label="字体大小" :label-width="formLabelWidth">
            <!-- <el-input v-model="logoInfo.config.fontSize" size="small" style="width:30%;"></el-input> -->
            <el-select size="small" v-model="logoInfo.config.fontSize" placeholder="请选择" style="width:80%;">
              <el-option :label="'默认'" :value="''"></el-option>
              <el-option :label="'1em'" :value="'1em'"></el-option>
              <el-option :label="'1.1em'" :value="'1.1em'"></el-option>
              <el-option :label="'1.2em'" :value="'1.2em'"></el-option>
              <el-option :label="'1.3em'" :value="'1.3em'"></el-option>
              <el-option :label="'1.4em'" :value="'1.4em'"></el-option>
              <el-option :label="'1.5em'" :value="'1.5em'"></el-option>
              <el-option :label="'1.6em'" :value="'1.6em'"></el-option>
              <el-option :label="'1.7em'" :value="'1.7em'"></el-option>
              <el-option :label="'1.8em'" :value="'1.8em'"></el-option>
              <el-option :label="'1.9em'" :value="'1.9em'"></el-option>
              <el-option :label="'12px'" :value="'12px'"></el-option>
              <el-option :label="'14px'" :value="'14px'"></el-option>
              <el-option :label="'16px'" :value="'16px'"></el-option>
              <el-option :label="'18px'" :value="'18px'"></el-option>
              <el-option :label="'20px'" :value="'20px'"></el-option>
              <el-option :label="'22px'" :value="'22px'"></el-option>
              <el-option :label="'28px'" :value="'28px'"></el-option>
              <el-option :label="'32px'" :value="'32px'"></el-option>
              <el-option :label="'36px'" :value="'36px'"></el-option>
              <el-option :label="'42px'" :value="'42px'"></el-option>
              <el-option :label="'48px'" :value="'48px'"></el-option>
              <el-option :label="'52px'" :value="'52px'"></el-option>
              <el-option :label="'64px'" :value="'64px'"></el-option>
              <el-option :label="'72px'" :value="'72px'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字体颜色" :label-width="formLabelWidth">
            <el-color-picker v-model="logoInfo.config.color"></el-color-picker>
          </el-form-item>
          <el-form-item label="是否加粗" :label-width="formLabelWidth">
            <el-radio v-model="logoInfo.config.fontWeight" size="small" :label="0">不加粗</el-radio>
            <el-radio v-model="logoInfo.config.fontWeight" size="small" :label="1">加粗</el-radio>
          </el-form-item>
        </div>
        <!-- 图片显示 -->
        <div v-if="logoInfo.type === 2">
          <el-form-item label="图片Logo" :label-width="formLabelWidth" class="requireStar">
            <div>
              <img class="logo-img-u" @click.stop="clickLogo" :key="logoInfo.img.src" v-lazy="logoInfo.img.src"
                alt="logo">
            </div>
            <div style="font-size:12px; color:#E88F21; line-height:1.1;">建议图片高度80px</div>
          </el-form-item>
          <el-form-item label="图片alt属性" :label-width="formLabelWidth">
            <el-input v-model="logoInfo.img.alt" size="small" maxlength="100" placeholder="请输入内容" style="width:50%;">
            </el-input>
          </el-form-item>
          <el-form-item label="图片title属性" :label-width="formLabelWidth">
            <el-input v-model="logoInfo.img.title" size="small" placeholder="请输入内容" style="width:50%;"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmitData">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择图片 -->
    <ChooseRepertory ref="chooseImage" />
  </div>
</template>

<script>
import ImagesEmpty from '@/assets/images/image-empty.png'
import * as functions from '@/core/functions.js'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import { mapState } from 'vuex'
import * as WindowType from '@/config/windowtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import _ from 'lodash'

export default {
  created () {
    VueFunctions.method(WindowType.EDIT_LOGO, (bjComponent) => {
      this.bjComponent = bjComponent
      let { render: { data }, _other } = this.bjComponent
      this.dialogFormVisible = true
      this.loading = false
      if (data) {
        this.logoInfo = initLogoInfo(JSON.parse(JSON.stringify(this.logoInfo)), data)
      }
      if (_other && _other.img.hrepertory) {
        this.hrepertory = _other.img.hrepertory
      }
    })
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      dialogFormVisible: false,
      loading: true,
      formLabelWidth: '120px',
      logoInfo: {
        theme: 'default',
        title: '',
        type: -1,
        config: {
          fontSize: '',
          color: '#409eff',
          fontWeight: 0
        },
        img: {
          src: ImagesEmpty,
          alt: '',
          title: ''
        }
      },
      hrepertory: {},
      // 阿毅，用户保存弹窗传递过来的参数
      bjComponent: null
    }
  },
  methods: {
    show () {
      this.dialogFormVisible = true
      this.loading = false
      this.bjComponent = BackendjsFunctions.getLogo()
      let { render: { data }, _other } = this.bjComponent
      if (data) {
        this.logoInfo = initLogoInfo(JSON.parse(JSON.stringify(this.logoInfo)), data)
      }
      if (_other && _other.img.hrepertory) {
        this.hrepertory = _other.img.hrepertory
      }
    },
    clickLogo () {
      this.$refs['chooseImage'].show({ title: '选择站点Logo图片', where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          repertoryList.map(item => {
            // let repertoryImageSrc = { hostId: this.$store.state.host.id, repertoryId: item.id, suffix: item.suffix, type: item.type, link: item.link }
            // this.logoInfo.img.src = functions.getRepertoryImageSrc(repertoryImageSrc)
            this.logoInfo.img.src = functions.getRepertoryImageSrcByHostRepertory(item)
            this.hrepertory = item
          })
        }
      })
    },
    // 请求后台
    onSubmitData () {
      if (this.logoInfo.type === 1 && (this.logoInfo.title === '' || this.logoInfo.title.trim() === '')) {
        this.$message.error('文字logo不能为空！')
        return
      }

      if (this.logoInfo.type === 2 && (!this.hrepertory || !this.hrepertory.id || this.hrepertory.id < 1)) {
        this.$message.error('图片logo不能为空！')
        return
      }

      let weight = this.logoInfo.config.fontWeight ? 'bolder' : 'normal'
      this.logoInfo.config.fontWeight = weight
      this.bjComponent.render.data = this.logoInfo
      this.bjComponent._other.img.hrepertory = this.hrepertory

      BackendjsFunctions.saveLogo(_.cloneDeep(this.bjComponent))
      this.dialogFormVisible = false
    }
  },
  components: {
    ChooseRepertory
  }
}

function initLogoInfo (logoInfo, response) {
  logoInfo.theme = response.theme
  logoInfo.type = parseInt(response.type)
  logoInfo.title = response.title
  if (response.img && response.img.src) {
    logoInfo.img.src = response.img.src
    logoInfo.img.alt = response.img.alt ? response.img.alt : ''
    logoInfo.img.title = response.img.title ? response.img.title : ''
  } else {
    logoInfo.img.src = ImagesEmpty
    logoInfo.img.alt = ''
    logoInfo.img.title = ''
  }
  let tConfig = response.config ? response.config : {}
  if (!tConfig) {
    logoInfo.config = {
      fontSize: '',
      color: '#409eff',
      fontWeight: 0
    }
  } else {
    if (!tConfig.fontSize) {
      logoInfo.config.fontSize = ''
    } else {
      logoInfo.config.fontSize = tConfig.fontSize
    }
    if (!tConfig.color) {
      logoInfo.config.color = '#409eff'
    } else {
      logoInfo.config.color = tConfig.color
    }
    logoInfo.config.fontWeight = tConfig.fontWeight === 'normal' ? 0 : 1
  }
  return logoInfo
}
</script>

<style scoped>
.logo-img-u {
  max-width: 500px;
  max-height: 180px;
  cursor: pointer;
  background-color: #e0e0e0;
}
.requireStar /deep/ .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
